<template>
  <div>
    <fixedheader title="新增委托" right-icon=""></fixedheader>
    <div class="createStoreTea" ref="createStoreTea">
      <div class="coupon-wrap">
        <ul>
          <li class="border-1px">
            <div>
              <span class="title">存茶名称：</span>
              <input type="text" v-model="tea.name" placeholder="存茶名称" readonly="readonly">
            </div>
          </li>
          <li class="border-1px">
            <div>
              <span class="title">委托数：</span>
              <input type="text" v-model="tea.count" placeholder="委托数" required>
            </div>
          </li>
          <li class="border-1px">
            <div>
              <span class="title">起拍价(元)：</span>
              <input type="number" v-model="tea.startPrice" placeholder="起拍价" required>
            </div>
          </li>
          <li class="border-1px">
            <div>
              <span class="title">加价幅度(元)：</span>
              <input type="number" v-model="tea.markup" placeholder="每次加价多少元" required>
            </div>
          </li>
          <li class="border-1px">
            <div>
              <span class="title">拍卖时长(天)：</span>
              <input type="number" v-model="tea.dueDay" placeholder="拍卖时长(天)" required>
            </div>
          </li>
        </ul>
        <div class="btns btn-gray" v-show="!isValid"><span>确认提交</span></div>
        <div class="btns btn-green" v-show="isValid" @click.stop.prevent="createTea"><span>确认提交</span></div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll';
  import api from '@/api/api';
  import layer from '@/components/common/layer';
  import fixedheader from '@/components/fixedtoolbar/fixedheader';

  const defaultTea = {
    name: '',
    count: '',
    startPrice: '',
    markup: '',
    dueDay: '',
    teaId: ''
  };
  export default {
    data() {
      return {
        tea: Object.assign({}, defaultTea),
        oldTea: {},
        layer: {
          title: '系统提示',
          text: '',
          button: {
            text: '知道了!'
          }
        }
      };
    },
    activated() {
      this.fetchData();
      this.show();
    },
    deactivated() {
      this.hide();
    },
    computed: {
      isValid() {
        if (this.tea.count <= 0) {
          return false;
        } else if (this.tea.startPrice <= 0) {
          return false;
        } else if (this.tea.markup <= 0) {
          return false;
        } else if (this.tea.dueDay <= 0) {
          return false;
        }
        return true;
      }
    },
    methods: {
      fetchData() {
        let teaId = this.$route.query.id || '';
        if (!teaId) {
          this.$store.dispatch('openToast', '非法请求!');
          return;
        }
        api.getSingleStore(teaId).then(response => {
          this.oldTea = response.data;
          this.tea.name = this.oldTea.name;
          this.tea.startPrice = this.oldTea.initPrice || 0;
        });
      },
      _initScroll() {
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.createStoreTea, {
              click: true
            });
          } else {
            this.scroll.refresh();
          }
        });
      },
      createTea() {
        if (this.tea.count <= 0 || this.tea.count > this.oldTea.leftCount) {
          this.$store.dispatch('openToast', '委托数不能小于1或超过存茶数');
          return;
        } else if (this.tea.startPrice <= 0) {
          this.$store.dispatch('openToast', '起拍价不能小于1');
          return;
        } else if (this.tea.markup <= 0) {
          this.$store.dispatch('openToast', '加价幅度不能小于1');
          return;
        } else if (this.tea.dueDay <= 0) {
          this.$store.dispatch('openToast', '拍卖周期不能小于1');
          return;
        }
        let user = this.$store.getters.getUserInfo;
        this.tea.userId = user && user.userId || 0;
        let teaId = this.$route.query.id || '';
        this.tea.teaId = teaId;
        api.createNewAuction(this.tea).then(response => {
          if (response.result === 0) {
            this.$store.dispatch('openToast', '商品已加入拍卖，期待成功！');
            this._reset();
            this.$router.push({name: 'storemgmt', query: {id: teaId}});
          } else {
            this.$store.dispatch('openToast', '网络故障，请稍候再试！');
          }
        }).catch(response => {
          this.$store.dispatch('openToast', '网络故障，请稍候再试！');
        });
      },
      _reset() {
        this.tea = Object.assign({}, defaultTea);
      },
      show() {
        this.$store.commit('HIDE_FOOTER');
      },
      hide() {
        this.$store.commit('SHOW_FOOTER');
      }
    },
    components: {
      fixedheader, layer
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '../../common/stylus/mixin';
  .createStoreTea
    position: absolute
    left: 0
    top: 44px
    bottom: 0
    width: 100%
    overflow: hidden
  .coupon-wrap
    position: relative
    background: #fff
    padding: 0 10px 40px 12px
    ul
      position: relative
      li
        position: relative
        display: block
        width: 100%
        padding: 7px 0
        font-size: 14px
        box-sizing: border-box
        &.border-1px
          border-1px(rgba(7, 17, 27, 0.1))
        div
          display: flex
          box-sizing: border-box
          .title
            display: block
            width: 96px
            height: 30px
            line-height: 30px
            float: left
          input[type="text"], input[type="number"], select, textarea
            flex: 1
            height: 30px
          .radio-group
            flex: 1
            height: 30px
            line-height: 30px
            input
              height: 30px
              line-height: 30px
          select
            border: 1px solid #ccc
          input
            border: 0 none
            vertical-align: top
          textarea
            border: 1px dashed #ccc
            resize: none
            font-size: 14px
            box-sizing: border-box
          &.more:after
            position: absolute
            display: block
            width: 10px
            height: 10px
            content: ""
            border-top: 1px solid #666
            border-left: 1px solid #666
            -webkit-transform-origin: 50%
            transform-origin: 50%
            -webkit-transform: rotate(135deg)
            transform: rotate(135deg)
            top: 50%
            right: 5px
            margin-top: -4px
    .coupon-tips
      font-size: 12px
      line-height: 1.83em
      strong
        font-weight: 700
</style>

